<template>
  <div class="global">
    <div class="left">
      <Tooltip placement="right">
        <template #title>新建连接</template>
        <Button :icon="h(PlusOutlined)" type="link" @click="onBack"></Button>
      </Tooltip>
    </div>
    <div class="right">
      <Tabs
        type="editable-card"
        @edit="onEdit"
        hide-add
        v-model:activeKey="activeKey"
      >
        <TabPane
          v-for="(item, index) in paneList"
          :key="item.id"
          :class="[{ noNeedShow: !index }]"
        >
          <template #tab>
            <span>
              <PlusOutlined v-if="!index" />
              <DesktopOutlined v-else />
              <span>{{ item.tab }}</span>
            </span>
          </template>
        </TabPane>
      </Tabs>
      <div class="global_container" :style="globalStyle">
        <component :is="showWitch" @open="onOpen" :shellList="shellList" />
      </div>
    </div>
  </div>
  <!-- <Xterm /> -->
</template>

<script setup lang="ts">
import { computed, h, ref } from 'vue';
import { DesktopOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { Button, TabPane, Tabs, Tooltip } from 'ant-design-vue';
import detail from './components/detail.vue';
import list from './components/list.vue';

const paneList = ref([
  {
    id: 1,
    tab: '新建连接',
  },
]);

const onEdit = (targetKey, action) => {
  console.log(targetKey, 'targetKey');
  console.log(action, 'action');
  if (action === 'remove') {
    const index = paneList.value.findIndex((i) => i.id === targetKey);
    paneList.value.splice(index, 1);
    activeKey.value = 1;
    shellList.value = [];
  }
};

const activeKey = ref(1);
const showWitch = computed(() => {
  return activeKey.value === 1 ? list : detail;
});
const onBack = () => {
  activeKey.value = 1;
};

const globalStyle = computed(() => {
  return {
    padding: activeKey.value === 1 ? '0 30px' : 0,
  };
});
const shellList = ref([]);

const onOpen = (item) => {
  if (paneList.value.length <= 1) {
    paneList.value.push({
      id: 2,
      tab: '主机终端',
    });
  }
  activeKey.value = 2;
  const index = shellList.value.findIndex((i) => i.id === item);
  if (index === -1) {
    shellList.value.push({
      id: item,
      tab: '数据库',
    });
  }
};
</script>

<style scoped lang="scss">
.global {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .left {
    width: 50px;
    background-color: #2c2e31;
    display: flex;
    justify-content: center;
    padding-top: 6px;
  }
  .right {
    flex: 1;
  }
}
.global_container {
  height: calc(100% - 45px);
  background: #1e1f29;
}

:deep(.ant-tabs-nav) {
  background: #2c2e31;
  margin-bottom: 0;
  height: 45px;
  .ant-tabs-nav-list {
    .ant-tabs-tab {
      &:first-child {
        &::after {
          display: none;
        }
        .ant-tabs-tab-remove {
          display: none;
        }
      }
    }
  }
  &::before {
    display: none;
  }
  .ant-tabs-tab {
    &::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 80px;
      height: 100%;
      background: linear-gradient(90deg, transparent, #000);
      opacity: 0;
    }
  }
  .ant-tabs-tab,
  .ant-tabs-nav-add {
    border: none;
    &.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #fff;
      }
      background: rgba(67, 67, 67);
    }
    &:hover {
      .ant-tabs-tab-remove {
        opacity: 1;
      }
      &::after {
        opacity: 1;
      }
    }
    .ant-tabs-tab-remove {
      position: absolute;
      z-index: 99;
      right: 20px;
      opacity: 0;
    }
  }
}
</style>

<route lang="json">
{
  "meta": {
    "title": "终端连接"
  }
}
</route>
